<template>
  <div class="world-overview-country-info d-flex flex-column pa-2" :class="open?'open':'close'">
    <v-card dark flat tile color="#00000000" class="d-flex flex-row justify-end line">
      <v-btn text @click="closeDrawer">CLOSE</v-btn>
    </v-card>
    <v-card dark flat tile color="#00000000" class="d-flex flex-row justify-center line">
      <h1>{{ this.getName() }}</h1>
    </v-card>
    <v-card dark flat tile color="#00000000" class="d-flex flex-row justify-start line">
      <div id="present-bar"></div>
    </v-card>
    <v-card dark flat tile color="#00000000" class="d-flex flex-row justify-start line">
      <div id="history-curve"></div>
    </v-card>
  </div>
</template>

<script>
import options from "./DrawerOptions";
export default {
  name: 'Drawer',
  props: {
    open: {default: false, type: Boolean},
    name: {default: '', type: String},
    code: {default: '', type: String},
  },
  data() {
    return {
      curveDom: {},
      barDom: {},
      curveObj: {},
      barObj: {},
      dataExists: true,
    }
  },
  mounted() {
    this.curveDom = document.getElementById('history-curve');
    this.barDom = document.getElementById('present-bar');
    this.curveObj = this.$echarts.init(this.curveDom);
    this.barObj = this.$echarts.init(this.barDom);
  },
  watch: {
    code: {
      handler(n,o) {
        if (n) this.changeCountry(n,o);
      },
      immediate: true,
    }
  },
  methods: {
    closeDrawer() {
      this.$emit("closeDrawer");
    },
    clickCountry() {
      this.$emit('clickCountry',this.code);
    },
    changeCountry(n,o) {
      //console.log('country changed from ' + o + ' to ' + n);
      this.restoreChart();
      let that = this;
      this.barObj.showLoading(options.DrawerLoading);
      this.curveObj.showLoading(options.DrawerLoading);
      if (n) that.$api.overview.countryInfo(n).then((res) => {
        let dataMatrix = [[],[],[],[]];
        for(o in res.data.timeline.cases) {
          dataMatrix[0].push(o);
          dataMatrix[1].push(res.data.timeline.cases[o]);
          dataMatrix[2].push(res.data.timeline.recovered[o]);
          dataMatrix[3].push(res.data.timeline.deaths[o]);
        }
        that.drawHistoryCurve(dataMatrix);
        let l = dataMatrix[0].length;
        that.drawPresentBar(dataMatrix[0][l - 1],dataMatrix[1][l - 1],dataMatrix[2][l - 1],dataMatrix[3][l - 1]);
      }).catch((err) => {
        that.$Message.error(err);
        that.drawBlank();
      });
    },
    drawHistoryCurve(dataMatrix) {
      options.DrawerLineChartOption.xAxis.data = dataMatrix[0];
      options.DrawerLineChartOption.series[0].data = dataMatrix[1];
      options.DrawerLineChartOption.series[1].data = dataMatrix[2];
      options.DrawerLineChartOption.series[2].data = dataMatrix[3];
      this.curveObj.setOption(options.DrawerLineChartOption);
      this.curveObj.on('click', (params) => {
        this.$emit('clickCountry',params.name);
      });
      window.addEventListener("resize", () => {
        this.curveObj.resize();
      });
      this.curveObj.hideLoading();
    },
    drawPresentBar(date,cases,recovered,deaths) {
      options.DrawerBarChartOption.series[0].data[0] = deaths;
      options.DrawerBarChartOption.series[1].data[0] = recovered;
      options.DrawerBarChartOption.series[2].data[0] = cases - deaths - recovered;
      this.barObj.setOption(options.DrawerBarChartOption);
      this.barObj.on('click', (params) => {
        this.$emit('clickCountry',params.name);
      });
      window.addEventListener("resize", () => {
        this.barObj.resize();
      });
      this.barObj.hideLoading();
    },
    drawBlank() {
      this.dataExists = false;
      this.curveObj.dispose();
      this.barObj.dispose();
      this.curveDom.innerHTML = `
            <div class="d-flex justify-center align-center" style="width: 100%;height: 256px">
                <h1 class="tips" style="font-size: 30px;color: gray;">暂无数据</h1>
            </div>
        `;
      this.barDom.innerHTML = `
            <div class="d-flex justify-center align-center" style="width: 100%;height: 100px">
                <h1 class="tips" style="font-size: 30px;color: gray;">暂无数据</h1>
            </div>
        `;
    },
    restoreChart() {
      if(!this.dataExists) {
        this.dataExists = true;
        this.curveDom.innerHTML = '';
        this.barDom.innerHTML = '';
        this.curveObj = this.$echarts.init(this.curveDom);
        this.barObj = this.$echarts.init(this.barDom);
      }
    },
    getName() {
      return this.name;
    }
  }
}
</script>

<style scoped>
.world-overview-country-info{
  display: none;
}
.world-overview-country-info.open{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 512px;
  background: rgba(0,0,0,0.9);
  box-shadow: 0 0 20px rgba(0,0,0,0.9);
  z-index: 1000;
  animation: slide-in-rightwards 0.5s ease-in-out;
}
.world-overview-country-info.close{
  position: absolute;
  left: -512px;
  top: 0;
  height: 100%;
  width: 512px;
  background: rgba(0,0,0,0.9);
  box-shadow: 0 0 20px rgba(0,0,0,0.9);
  z-index: 1000;
  animation: slide-out-leftwards 0.5s ease-in-out;
}

@keyframes slide-in-rightwards {
  0% { left: -512px; }
  100% { left: 0px; }
}
@keyframes slide-out-leftwards {
  0% {left: 0px}
  100% { left: -512px}
}

.world-overview-country-info .line{
  margin-top: 20px;
}
.world-overview-country-info h1{
  font-size: 40px;
}
.world-overview-country-info h2{
  font-size: 20px;
  color: gray;
  font-weight: light;
}
.world-overview-country-info #history-curve{
  width: 100%;
  height: 256px;
}
.world-overview-country-info #present-bar{
  width: 100%;
  height: 100px;
}
</style>